---
title: Listas con inputs
description: Una guía para usar Fluid DnD añadiendo formularios y inputs.
---

import {SingleVerticalPersonList} from "@/components/react/SingleVerticalPersonList.tsx";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de listas de personas

Mostrar como usar **Fluid DnD** para order una lista con datos editable.
Primero, vamos a crear una lista de personas:

export const listOfPeople = `
export const SingleVerticalPersonList: React.FC = () => {
    const [ parent, listValue, setList ] = useDragAndDrop<Person, HTMLUListElement>([
        { number: 1, name: "Carlos", edit: false },
        { number: 2, name: "Jorge", edit: false },
        { number: 3, name: "Ivis", edit: false },
    ]);
`;

<Code code={listOfPeople} lang="tsx" />

Después, crear una lista de personas en la vista y pasar los atributos `value` y `checkbox` a modificar con evento `onChange` el cual llama a las funciones `handleNameChange` y `handleEditChange`:

export const highlights = [`onChange`, `checked`, `value`, `handleNameChange`, `handleEditChange`];	

export const listOfNumbersHTML = `
    const handleNameChange = (number:number, name: string) => {
      setList(listValue.map(item => 
        item.number === number ? { ...item, name } : item
      ));
    };
    const handleEditChange = (number:number, edit: boolean) => {
      setList(listValue.map(item => 
        item.number === number ? { ...item, edit } : item
      ));
    };
    return (
        <ul ref={parent} className="person-list p-8 bg-[var(--sl-color-gray-6)]">
            {listValue.map((person, index) => (
              <li className="person" data-index={index} key={person.number}>
                    <input type="text" value={person.name} disabled={!person.edit} 
                    onChange={(e) => handleNameChange(person.number, e.target.value)}/>
                    <input type="checkbox" checked={person.edit} 
                    onChange={() => handleEditChange(person.number, !person.edit)}/> 
              </li>
            ))}
        </ul>
    )
};
`;

<Code code={listOfNumbersHTML} mark={highlights} lang="tsx" />

### Resultado

<div class="pl-8">
  <SingleVerticalPersonList client:load />
</div>
